<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/index.css">
    <script src="js/vue.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body id="body">
<div id="app">
    <button v-on:click="initPlayerMsg">hello</button>
    <p>{{user_id}}</p>
    <p>hp:{{playerAttr.hp}}</p>
    <p>mp:{{playerAttr.mp}}</p>
    <p>damage:{{playerAttr.damage}}</p>
    <p>def:{{playerAttr.def}}</p>

</div>
    <div id="self_panel_magic">
        <img src="img/magic.png" alt="" id="self_panel_magic_img">
        <h1>职业:法师</h1>
        <h2 id="hp">HP &nbsp;&nbsp;&nbsp;<div id="xl" title="血量">150</div></h2>
        <h2 id="mp">MP &nbsp;&nbsp;<div id="ll" title="蓝量">200</div></h2>
        <div id="gj">
            <img src="img/gongjili.png" alt="" title="攻击力">
            &nbsp;<p>:30</p>
        </div>
        <div id="fy">
            <img src="img/fangyuli.png" alt="" title="防御力"><p>:20</p>
        </div>
    </div>
<div id="menu">
    <button id="fight" title="对战信息"></button>
    <button id="self" title="个人信息"></button>
    <button id="skill" title="技能" onclick="initPlayer()"></button>
    <button id="plot" title="剧情"></button>
    <button id="friend" title="好友"></button>
    <button id="goods" title="背包"></button>
    <button id="set" title="设置"></button>
    <button id="help" title="帮助"></button>
</div>
<script>
    var mVue=new Vue({
        el:'#app',
        data:{
            counter: 0,
            user_id: '123',
            username: '',
            playerAttr: {
                role: 0,       //角色职业 1法师 2骑士 3剑士
                hp: 0,         //血量
                mp: 0,         //蓝量
                equipped:[], //已装备
                def: 0,        //防御力
                damage: 0,
            },               //角色属性
            bag:[],     //背包中的装备
            money: 0
        },
        methods: {
            initPlayerMsg() {
                $.ajax({
                    url: '/initPlayerMsg',
                    type: 'post',
                    success(res) {
                        mVue.user_id=res.user_id;
                        mVue.username=res.username;
                        mVue.bag=res.bag;
                        mVue.money=res.money;
                        mVue.playerAttr=res.playerAttr;
                    }
                });
            }
        }
    });

    function initPlayer() {
        mVue.initPlayerMsg();
    }
    var equip = [
        {
            title: '装备序号',
            key: 'equip_id'
        },
        {
            title: "装备名称",
            key: "eq_name"
        },
        {
            title: "装备攻击",
            key: "attack"
        },
        {
            title: "装备防御",
            key: "phy_def"
        },
        {
            title: '装备血量',
            key: 'eq_hp'
        },
        {
            title: "装备蓝量",
            key: "eq_mp"
        },
        {
            title: "装备价值",
            key: "eq_value"
        },
        {
            title:'装备部位',
            key:'eq_place'
        },
        {
            title: '装备详情',
            key: 'details',
        },
        {
            title: '装备品质',
            key: 'quality',
        }
    ];

</script>
</body>

</html>